<template>
	<div class="whrent">
		<myheader :title="title"></myheader>
	        <router-link to="/user/search"><div class="search">
	        <div class="img"><img src="../../../static/lxb/search.png"/></div>
	        <div class="txt">请输入商圈或小区名称</div>
	        </div>
	        </router-link>
	        <choice></choice>
	     <div class="install">
	     	<div class="in-left">保存搜索条件，获取最新房源</div>
	     	<div class="in-center">安装app</div>
	     	<div class="in-right"><img src="../../../static/lxb/nav.png"/></div>
	     </div>
	    <div class="de-list" v-for="item in data">
	    	<router-link :to="{path:'/lideta/mydetails',query:{id:item.house_id}}">
			<div class="de-img"><img v-bind:src="'http://106.13.72.24:81/house/public/static/uploads/'+item.img1" /></div>
			<div class="de-pro">
				<div class="pro-one">北滨路大三房，太阳台，住家装修，一线江景，诚信出售</div>
				<div class="pro-two">{{item.house_type}}/{{item.house_size}}㎡/{{item.house_direction}}/东方港湾</div>
				<div class="pro-three"><span>140万</span> 10725元/平</div>
			</div>
			</router-link>
		</div>
	    <router-link to="/user"><div class="news" style="box-shadow: 0 0 10px darkgray; border:1px solid gainsboro">
			<img src="../../../static/lxb/im@2x.png" />
		</div>
		</router-link>
		<div class="clik" @click="getData">{{state}}</div>
	</div>
	
</template>

<script>
	import myheader from '@/components/public/myheader'
	import choice from '@/components/public/choice'
	
	export default {
		name: "rentshare",
		data() {
			return {
				state:'点击加载更多',
				title: '',
				type: '',
				data: "",
				page:2,
				last_page:0
			}
		},
mounted:function() {
			//判读是否登陆了
			if(localStorage.getItem("nameid")==null||localStorage.getItem("nameid")==undefined||localStorage.getItem("nameid")==""){
				this.$router.push({
					name:'login'
				});
			}
			else{
				var _this = this;
				_this.axios.get(_this.ajaxUrl + '/api/rentshare/finds').then(function(res) {
					_this.data = res.data.data;
				}).catch(function(err) {
					console.log(err);
				})
			}
		},
		components: {
			myheader,
			choice
			
		},
		methods:{
			back(){
				this.$router.go(-1);

		},
		 getData(){
                     	var _this=this;
                     	_this.axios.get(_this.ajaxUrl+ '/api/mylist/finds?page='+_this.page).
                     	then(function(res){
	                     	for(var i=0;i<res.data.data.length;i++){
								_this.data.push(res.data.data[i]);
							}
	                     	if(_this.page%3==0){
	                     		_this.state="没有更多了"
	                     	}
	                     	_this.page++;
                     	}).catch(function(err){
                     		console.log(err)
                     	})
                     	
                     	
                     }
		}
	}
</script>

<style scoped="scoped">
  .search{
  	width: 7rem;
  	height: 0.6rem;
  	margin: auto;
  	background: #e8e8e9;
  	margin-top: 0.3rem;
  }
  .img{
  	width: 0.32rem;
  	height: 0.33rem;
  	float: left;
  	margin-top: 0.1rem;
  	margin-left: 0.2rem;
  }
  .clik {
		width: 3rem;
		height: 0.6rem;
		text-align: center;
		line-height: 0.6rem;
		margin: auto;
		border-radius: 0.1rem;
		/*background: gainsboro;
		border: 1px dashed darkgray;*/
		color: gray;
		font-size: 0.16rem;
		display: block;
	}
  .img>img{
  	width: 100%;
  	height: 100%;
  }
  .txt{
  	width: 5rem;
  	height: 0.3rem;
  	float: left;
  	font-size: 0.12rem;
  	color: #808897;
  	margin-top: 0.1rem;
  }
  .nav-list{
  	width: 7rem;
  	height: 1rem;
  	margin: auto;
  	display: flex;
  	justify-content: space-around;
  	margin-top: 0.2rem;
  }
  .nav-list>div{
  	width: 1.25rem;
  	height: 0.6rem;
  	text-align: center;
  	line-height: 0.6rem;
  	font-size: 0.26rem;
  }
  .install{
  	width: 7rem;
  	height: 0.9rem;
  	margin: auto;
  	border-bottom: 1px solid #e8e8e9;
  }
  .in-left{
  	width: 4rem;
  	height: 0.4rem;
  	line-height: 0.4rem;
  	font-size: 0.2rem;
  	float: left;
  	margin-top: 0.2rem;
  }
  .news{
       	width: 0.8rem;
       	height: 0.7rem;
       	border-radius: 50%;
       	text-align: center;
         line-height: 1rem;
         position: fixed;
         top: 10rem;
         left: 6rem;
         background: white;
         z-index: 999;
       }
       .news>img{
       	width: 0.5rem;
       	height: 0.5rem;
       }
  .in-center{
  	width: 1.2rem;
  	height: 0.5rem;
  	float: left;
  	border: 2px solid #cfdefc;
  	border-radius: 0.1rem;
  	text-align: center;
  	line-height: 0.5rem;
  	font-size: 0.26rem;
  	color: #2a6ef6;
  	margin-top: 0.1rem;
  	margin-left: 0.9rem;
  }
  .in-right{
  	width: 0.2rem;
  	height: 0.3rem;
  	float: right;
  	margin-top: 0.2rem;
  }
  .in-right>img{
  	width: 100%;
  	height: 100%;
  }
  .de-list{
  	width: 7.05rem;
  	height: 2.45rem;
  	float: right;
  }
  .de-img{
  	width: 1.95rem;
  	height: 1.5rem;
  	float: left;
  	margin-top: 0.30rem;
  }
  .de-img>img{
  	width: 100%;
  	height: 100%;
  }
  .de-pro{
  	width: 4.1rem;
  	height: 1.5rem;
  	float: left;
  	margin-top: 0.3rem;
  	margin-left: 0.25rem;
  }
  .pro-one{
  	width: 4.1rem;
  	height: 0.7rem;
  	font-size: 0.26rem;
  }
  .pro-two{
  	width: 4.1rem;
  	height: 0.3rem;
  	font-size: 0.12rem;
  	color: #b8b8b8;
    line-height: 0.3rem;
    margin-top: 0.1rem;
  }
  .pro-three{
  	width: 4.1rem;
  	height: 0.3rem;
  	font-size: 0.12rem;
  	color: #b8b8b8;
  	margin-top: 0.1rem;
  }
  .pro-three>span{
  	color: red;
  	font-size: 0.26rem;
  }
  .other{
  	width:7rem;
  	height: 0.3rem;
  	text-align: center;
  	line-height: 0.3rem;
  	float: left;
  	margin-top: 0.2rem;
  	font-size: 0.2rem;
  	color: #7e95aa;
  }
</style>